<!DOCTYPE html>
<html lang="zh">

<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta name="renderer" content="webkit">
    <!-- 避免IE使用兼容模式 -->
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title>表单动态表格</title>
    <script type="text/javascript" src="./../../../static/js/include/_include-css.js"></script>

</head>

<body class="bg-gray">
    <div class="wrapper">
        <div class="wrapper-container">
            <div class="row">
                <div class="col-md-12">
                    <div class="panel">
                        <div class="panel-body">
                            <form class="form-horizontal" id="form-add">
                                <h4 class="form-header">基本信息</h4>
                                <div class="row">
                                    <div class="col-md-6">
                                        <div class="form-group">
                                            <label class="col-sm-2 control-label">帐号：</label>
                                            <div class="col-sm-9">
                                                <input type="text" class="form-control" placeholder="请输入内容">
                                            </div>
                                        </div>
                                        <div class="form-group">
                                            <label class="col-sm-2 control-label">手机号码：</label>
                                            <div class="col-sm-9">
                                                <input type="text" class="form-control" placeholder="请输入内容">
                                            </div>
                                        </div>
                                    </div>
                                    <div class="col-md-6">
                                        <div class="form-group">
                                            <label class="col-sm-2 control-label">姓名：</label>
                                            <div class="col-sm-9">
                                                <input type="text" class="form-control" placeholder="请输入内容">
                                            </div>
                                        </div>
                                        <div class="form-group">
                                            <label class="col-sm-2 control-label">电子邮箱：</label>
                                            <div class="col-sm-9">
                                                <input type="text" class="form-control" placeholder="请输入内容">
                                            </div>
                                        </div>
                                    </div>
                                </div>
                                <h4 class="form-header">个人数据</h4>
                                <div class="row">
                                    <div class="col-sm-12">
                                        <button type="button" class="btn btn-primary btn-sm" onclick="addRow()"><i
                                                class="fa fa-plus"> 增加</i></button>
                                        <button type="button" class="btn btn-danger btn-sm" onclick="sub.delRow()"><i
                                                class="fa fa-minus"> 删除</i></button>
                                        <div class="col-sm-12 select-table table-striped">
                                            <table id="bootstrap-table"></table>
                                        </div>
                                    </div>
                                </div>
                                <div class="row">
                                    <div class="col-sm-offset-5 col-sm-10">
                                        <div class="space-line">
                                            <button type="button" class="btn btn-sm btn-primary"
                                                onclick="submitHandler()"><i class="fa fa-check"></i>保 存</button>&nbsp;
                                        </div>
                                    </div>
                                </div>
                            </form>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <script type="text/javascript" src="./../../../static/js/include/_include-js.js"></script>

    <script type="text/javascript">
        $(function () {
            var options = {
                url: "./../../../static/data/edit.json",
                method: 'get',
                showSearch: false,
                sidePagination: "client",

                showRefresh: false,
                pagination: false,
                columns: [{
                    checkbox: true,
                },
                {
                    field: 'index',

                    title: '序号',
                    width: 5,
                    align: "center",
                    formatter: function (value, row, index) {
                        var columnIndex = $.common.sprintf("<input type='hidden' name='index' value='%s'>", $.table.serialNumber(index));
                        var columnId = $.common.sprintf("<input type='hidden' name='user[%s].id' value='%s'>", index, row.id);
                        return columnIndex + $.table.serialNumber(index) + columnId;
                    }
                },
                {
                    field: 'code',
                    title: '用户编号',
                    formatter: function (value, row, index) {
                        var html = $.common.sprintf("<input class='form-control' type='text' name='user[%s].code' value='%s'>", index, value);
                        return html;
                    }
                },
                {
                    field: 'name',
                    title: '用户姓名',
                    formatter: function (value, row, index) {
                        var html = $.common.sprintf("<input class='form-control' type='text' name='user[%s].name' value='%s'>", index, value);
                        return html;
                    }
                },
                {
                    field: 'phone',
                    title: '用户手机',
                    formatter: function (value, row, index) {
                        var html = $.common.sprintf("<input class='form-control' type='text' name='user[%s].phone' value='%s'>", index, value);
                        return html;
                    }
                },
                {
                    field: 'mail',
                    title: '用户邮箱',
                    formatter: function (value, row, index) {
                        var html = $.common.sprintf("<input class='form-control' type='text' name='user[%s].mail' value='%s'>", index, value);
                        return html;
                    }
                },
                {
                    field: 'account',
                    title: '账户金额',
                    formatter: function (value, row, index) {
                        var html = $.common.sprintf("<input class='form-control' type='text' name='user[%s].account' value='%s'>", index, value);
                        return html;
                    }
                },

                {
                    title: '操作',
                    align: 'center',
                    formatter: function (value, row, index) {
                        var value = $.common.isNotEmpty(row.index) ? row.index : $.table.serialNumber(index);
                        return '<a class="btn btn-danger btn-xs" href="javascript:void(0)" onclick="sub.delRowByIndex(\'' + value + '\')"><i class="fa fa-remove"></i>删除</a>';
                    }
                }]
            };
            $.table.init(options);
        });
        function addRow() {
            var count = $("#" + table.options.id).bootstrapTable('getData').length;
            var row = {
                index: $.table.serialNumber(count),
                code: "",
                name: "",
                phone: "",
                mail: "",
                account: ""
            }
            sub.addRow(row);
        }

        var sub = {
            editRow: function () {
                var c = [];
                for (var j = 0; j < table.options.columns.length; j++) {
                    if (table.options.columns[j].visible != false) {
                        c.push(table.options.columns[j])
                    }
                }
                var d = new Array();
                var g = $("#" + table.options.id).bootstrapTable("getData");
                var h = g.length;
                for (var l = 0; l < h; l++) {
                    var b = $("#" + table.options.id + ' tr[data-index="' + l + '"] td');
                    var f = new Object();
                    for (var e = 0; e < b.length; e++) {
                        var a = $(b[e]).find("input");
                        var p = $(b[e]).find("select");
                        var k = $(b[e]).find("textarea");
                        var n = c[e].field;
                        if ($.common.isNotEmpty(a.val())) {
                            f[n] = a.val()
                        } else {
                            if ($.common.isNotEmpty(p.val())) {
                                f[n] = p.val()
                            } else {
                                if ($.common.isNotEmpty(k.val())) {
                                    f[n] = k.val()
                                } else {
                                    if (n == "index" && $.common.isNotEmpty(g[l].index)) {
                                        f[n] = g[l].index
                                    } else {
                                        f[n] = ""
                                    }
                                }
                            }
                        }
                    }
                    var o = g[l];
                    var m = $.extend({}, o, f);
                    d.push({
                        index: l,
                        row: m
                    })
                }
                $("#" + table.options.id).bootstrapTable("updateRow", d)
            },
            delRow: function (c) {
                sub.editRow();
                var a = $.common.isEmpty(c) ? "index" : c;
                var b = $.table.selectColumns(a);
                if (b.length == 0) {
                    $.modal.alertWarning("请至少选择一条记录");
                    return
                }
                $("#" + table.options.id).bootstrapTable("remove", {
                    field: a,
                    values: b
                })
            },
            delRowByIndex: function (a) {
                sub.editRow();
                $("#" + table.options.id).bootstrapTable("remove", {
                    field: "index",
                    values: [a]
                });
                sub.editRow()
            },
            addRow: function (d, c) {
                sub.editRow();
                var a = $.common.isEmpty(c) ? table.options.id : c;
                table.set(a);
                var b = $("#" + a).bootstrapTable("getData").length;
                $("#" + a).bootstrapTable("insertRow", {
                    index: b + 1,
                    row: d
                });
                sub.editRow();
            }
        };

        /* 主子表-提交 */
        function submitHandler(index, layero) {
            var data = $("#form-add").serializeArray();
            alert(JSON.stringify(data))
        }
    </script>
</body>

</html>